<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>

<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>文章中心</title>
    <!-- 必须的 meta 标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <!-- 1. 导入CSS的全局样式 -->

    <style>
        .form-group {
            margin-bottom: 15px;
        }

        .form-group select {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 200px;
        }

        .btn {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #45a049;
        }
    </style>
<%--    <script>--%>
<%--        window.onload = function () {--%>
<%--            //查询分类数据--%>
<%--            $(function () {--%>
<%--                $.get("category/findAll", {}, function (data) {--%>

<%--                    var lis = '<option value="">请选择分类</option>';--%>
<%--                    // //遍历请求回来的json数组，拼接字符串--%>
<%--                    for (let i = 0; i < data.length; i++) {--%>
<%--                        var li = '<option value="'+ data[i].cid+'">'+ data[i].cname+'</option>';--%>
<%--                        lis += li;--%>
<%--                    }--%>
<%--                    //将lis字符串设置到ul的html内容中--%>
<%--                    $("#category").html(lis);--%>
<%--                });--%>
<%--            });--%>

<%--            //展示标签--%>
<%--            $(function () {--%>
<%--                $.get("label/findAll", {}, function (data) {--%>
<%--                    // //遍历请求回来的json数组，拼接字符串--%>
<%--                    var lis = '<option value="">请选择标签</option>';--%>
<%--                    for (let i = 0; i < data.length; i++) {--%>
<%--                        var li = '<option id="label" value="'+ data[i].lid+'">'+ data[i].lname+'</option>';--%>
<%--                        lis += li;--%>
<%--                    }--%>
<%--                    //将lis字符串设置到ul的html内容中--%>
<%--                    $("#label").html(lis);--%>
<%--                });--%>
<%--            });--%>
<%--        }--%>

<%--    </script>--%>
</head>
<body>
<div class="container">
    <h3 style="text-align: center">文章中心</h3>
    <div style="float: left;">
        <form class="form-inline" action="${pageContext.request.contextPath}/article/pageQuery" method="post">
            <div class="form-group">
                <label for="exampleInputName2"></label>
                <input type="text" class="form-control" value="" id="exampleInputName2" name="title" placeholder="请输入标题搜索">
            </div>
            <div class="form-group">
                <select id="category" name="cid">
                    <option value="">请选择分类</option>
                    <c:forEach items="${categoryList}" var="category" varStatus="s">
                        <option  name="cid" value="${category.cid}">${category.cname}</option>
                    </c:forEach>
                    <!--            <option value="分类1">分类1</option>-->
                    <!--            <option value="分类2">分类2</option>-->
                    <!--            <option value="分类3">分类3</option>-->
                </select>
            </div>
            <div class="form-group">

                <select id="label" name="lid">
                    <option value="">请选择标签</option>
                    <c:forEach items="${labelList}" var="label" varStatus="s">
                        <option name="lid" value="${label.lid}">${label.lname}</option>
                    </c:forEach>
                    <!--            <option value="分类1">分类1</option>-->
                    <!--            <option value="分类2">分类2</option>-->
                    <!--            <option value="分类3">分类3</option>-->
                </select>
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
        </form>
    </div>
    <div style="float: right; margin: 5px;">
        <a class="btn btn-primary" href="${pageContext.request.contextPath}/index.html" style="margin-top: -5px">返回首页</a>
    </div>
    <form id="form_summit">
        <table border="1" class="table table-bordered table-hover" style="text-align: center">
            <tr class="success" >
                <th>ID</th>
                <th>作者</th>
                <th>标题</th>
                <th>发布时间</th>
                <th>浏览量</th>
                <th>点赞量</th>
                <th>分类</th>
                <th>内容</th>
            </tr>

            <c:forEach items="${list}" var="article" varStatus="s">
                <tr>
                    <td>${article.rid}</td>
                    <td>${article.username}</td>
                    <td>${article.title}</td>
                    <td>${article.createTime}</td>
                    <td>${article.browserNum}</td>
                    <td>${article.favour}</td>
                    <td>${article.cname}</td>
                    <td><a href="${pageContext.request.contextPath}/article/lookArticle?rid=${article.rid}">点击查看文章内容</a></td>
                </tr>
            </c:forEach>

        </table>
    </form>

    <div>
        <nav>
            <ul class="pagination">

                <div>
    <span style="font-size: 25px; margin-left: 20px;">
        共<span style="color: blue;">${pb.totalCount}</span>条记录，共<span style="color: blue;">${pb.totalPage}</span>页
    </span>
                </div>

                <br>

                <li class="page-item">
                    <a class="page-link"
                       href="${pageContext.request.contextPath}/?currentPage=${pb.currentPage - 1}"
                       aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <ul class="pagination">
                    <c:set var="previousPages" value="${pb.currentPage - 5}" />
                    <c:set var="nextPages" value="${pb.currentPage + 4}" />

                    <c:if test="${previousPages < 1}">
                        <c:set var="previousPages" value="1" />
                    </c:if>

                    <c:if test="${pb.totalPage < nextPages}">
                        <c:set var="nextPages" value="${pb.totalPage}" />
                    </c:if>
                    <c:forEach begin="${previousPages}" end="${nextPages}" var="i">
                        <c:if test="${pb.currentPage == i}">
                            <li class="page-item active">
                                <a class="page-link"
                                   href="${pageContext.request.contextPath}/article/pageQuery?currentPage=${i}&rows=10">${i}</a>
                            </li>
                        </c:if>
                        <c:if test="${pb.currentPage != i}">
                            <li class="page-item">
                                <a class="page-link"
                                   href="${pageContext.request.contextPath}/article/pageQuery?currentPage=${i}&rows=10">${i}</a>
                            </li>
                        </c:if>
                    </c:forEach>

                    <li class="page-item">
                        <a class="page-link"
                           href="${pageContext.request.contextPath}/article/pageQuery?currentPage=${pb.currentPage + 1}&rows=10"
                           aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </ul>
        </nav>
    </div>
</div>
</body>
</html>
